import React, { useState } from "react";
import { adPositionTypes } from "@/constants/types";
import { PlusOutlined } from "@ant-design/icons";
import { Button, Image, Table, TableColumnType, message } from "antd";
import AdPositionUpdate from "../modals/AdPositionUpdate";
import { adPageAdd, adPageUpdate, fetchAdPageList } from "../services";
import { useComponentDidMount } from "@/hooks";
import { useRequest } from "ahooks";


const AdPositionManage = () => {
  const [dataSource, setDataSource] = useState([]);
  const [pagination, setPagination] = useState({
    pageNum: 1,
    pageSize: 10,
    total: 0
  });

  const [visible, setVisble] = useState(false);
  const [currentRow, setCurrentRow] = useState(null);
  const {loading: addLoading, runAsync: addApi} = useRequest(adPageAdd, {manual: true});
  const {loading: updateLoading, runAsync: updateApi} = useRequest(adPageUpdate, {manual: true});

  const search = async (params:{pageNum: number; pageSize: number} = {
    pageNum: 1,
    pageSize: 10
  }) => {
    const res = await fetchAdPageList({
      ...params
    });
    setDataSource(res?.data || []);
    setPagination({
      ...params,
      total: res?.total
    });
  }


  const handleAdd = () => {
    setVisble(true);
  }
  const handleEdit = (record: any) => {
    setCurrentRow(record);
    setVisble(true);
  }

  const contentProps = {
    visible,
    currentRow,
    loading: currentRow ? updateLoading : addLoading,
    title: currentRow ? '编辑广告页' : '新增广告页',
    onCancel: () => {
      setVisble(false);
      setCurrentRow(null);
    },
    onSubmit: async (params: any) => {
      const apiFunc = currentRow ? updateApi : addApi;
      const res = await apiFunc(currentRow ? {
        ...params, 
        id: currentRow?.id
      } : params);
      if (res.code === '0') {
        message.success('操作成功');
        contentProps.onCancel();
        search({pageNum: 1, pageSize: 20});
      }
    }
  }

  const columns: TableColumnType<adPositionTypes> [] = [
    {
      title: '广告页',
      dataIndex: 'name'
    },
    {
      title: '页面示例图',
      dataIndex: 'imagePath',
      render: (_, record) => <Image src={record?.imageUrl} alt={record?.imageName} width={100} height={100} />
    },
    {
      title: '广告位',
      dataIndex: 'slots'
    },
    {
      title: '创建时间',
      dataIndex: 'createTime'
    },
    {
      title: '创建人',
      dataIndex: 'createBy'
    },
    {
      title: '操作',
      dataIndex: 'options',
      render: (_, record: adPositionTypes) => {
        return (
          <Button type="primary" onClick={() => handleEdit(record)}>编辑</Button>
        );
      }
    },
  ]


  useComponentDidMount(() => {
    search({pageNum: 1, pageSize: 20});
  })

  return (
   <>
   <div style={{display: 'flex', justifyContent: 'flex-end'}}>
    <Button type="primary" onClick={handleAdd} icon={<PlusOutlined />}>新增</Button>
   </div>
    <Table
      className="mt10"
      bordered
      rowKey="id"
      dataSource={dataSource}
      columns={columns}
      scroll={{y: 650}}
      pagination= {{
       showTotal: (total: number) => `共 ${total} 条`,
       ...pagination,
       onChange: (pageNum, pageSize) => {
         search({pageNum, pageSize});
       }
      }}
    />
    {visible && <AdPositionUpdate {...contentProps} />}
  </>
  );
}
export default AdPositionManage;